﻿@model IEnumerable<Von.Web.Structs.ImageInfo>
@{
    ViewData["Title"] = "照片资源管理";
}
<h2>照片资源<a class="btn btn-link" onclick="NewImage()">新建照片资源</a></h2>
<table id="ImageList" class="table">
    <thead>
        <tr>
            <th>资源类型</th>
            <th>编码</th>
            <th>资源名称</th>
            <th>图片类型</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.Kind)</td>
                <td>@Html.DisplayFor(modelItem => item.Code)</td>
                <td>@Html.DisplayFor(modelItem => item.ImageName)</td>
                <td>@Html.DisplayFor(modelItem => item.Ext)</td>
                <td>
                    <input type="button" class="btn-link" onclick="EditImage(this, '@item.ID')" value="编辑"> | 
                    <input type="button" class="btn-danger" onclick="DeleteImage(this, '@item.ID')" value="删除">
                </td>
            </tr>
        }
    </tbody>
</table>
<!-- 模态框（Modal） -->
<div class="modal fade" id="ImageEditor" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true" data-mode="new">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color:aquamarine;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ModalLabel">照片资源编辑</h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <label for="Kind" class="input-group-addon column-prompt">资源类型</label>
                    <input id="Kind" class="form-control" />
                </div>
                <div class="input-group">
                    <label for="Code" class="input-group-addon column-prompt">编码</label>
                    <input id="Code" class="form-control" />
                </div>
                <div class="input-group">
                    <label for="ImageName" class="input-group-addon column-prompt">资源名称</label>
                    <input id="ImageName" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="Img" class="control-label">图片</label>
                    <input id="Img" type="file" class="form-control" onchange="ViewImage()" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
                    <img id="imgView" style="width: 100%;"/>
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="ID" />
                <div class="form-group">
                    <input value="保存" class="btn btn-default" onclick="SaveImage()" />
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<script type="text/javascript">
    function NewImage() {
        von.selectRow();
        von.editor.clear();
        von.editor.display("new");
    }
    function EditImage(btn, id) {
        von.selectRow(btn);
        $("#ID").val(id);
        AjaxPostData("@Url.Ajax("GetByImage")", { ID: id }, function (data) {
            von.editor.setData(data);
            $("#imgView").attr("src", "/Service/Images/" + data.ID);
            von.editor.display("edit");
        });
    }
    function ViewImage() {
        $("#imgView").attr("src", getLocalURL($("#Img").get(0).files[0]));
    }
    function DeleteImage(btn, id) {
        if (confirm('确定删除吗？')) {
            von.selectRow(btn);
            AjaxPostData('@Url.Ajax("DeleteImage")', { 'ID': id }, function (result) { von.deleteRow(); });
        }
    }
    function CheckImage(){
        var msg = "";
        if($("#Kind").val() == "") msg += "资源类型必须录入，不允许为空。";
        if($("#Code").val() == "") msg += "编码必须录入，不允许为空。";
        return msg;
    }
    function SaveImage() {
        var msg = CheckImage();
        if (msg != "") return SysWarning(msg);
        var file = $("#Img").get(0).files[0]
        var data = new FormData();
        data.append("ID", $("#ID").val());
        data.append("Kind", $("#Kind").val());
        data.append("Code", $("#Code").val());
        data.append("ImageName", $("#ImageName").val());
        data.append(file.name, file);
        if (von.editor.mode == "new") AjaxSendForm("POST", "@Url.Ajax("AddImage")", data, function (data) { von.appendRow(von.getHtml(data)); von.editor.close(); });
        else AjaxSendForm("POST", "@Url.Ajax("EditImage")", data, function (data) { von.replaceRow(von.getHtml(data)); von.editor.close(); });
    }
</script>
@Html.Import(Von.Web.Html.EImportSection.BodyTrailler, "ImageInit",
    @<script>
        var von = VonGrid({
            app: "Image",
            keyName: "ID",
            displayFields: ["Kind","Code","ImageName","Ext"],
            fields: ["ID","Kind","Code","ImageName","Ext"]
        });
    </script>
)
